<!DOCTYPE html>
<html>
<head>
	<title>照片书首页</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	 <link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	 <link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/photoBook.css">
	 <link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/photoBottom.css">
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/zepto.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/modernizr.2.5.3.min.js"></script>
	 <script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js">
	</script>
	<style type="text/css">
	/** { touch-action: none; }*/
	body{
		overflow-y: scroll;
	}

	.three{
		width: 6.613333rem;
		height: 8.56rem;
		left: 0.8rem;

		position: absolute;
		overflow: hidden;
		top: 1.333333rem;
		background:#fff;
	}

	.left{
		float: left;

	}
	.trim{
		width: 3.173333rem;
		height: 4.293333rem;
	}
	.trim_right{
		margin-left:0.266667rem;
	}
	.conversion_bot{
		width: 6.64rem;
		height: 4.0rem;
		margin-top: 0.266667rem;
	}
	.three>div:nth-of-type(1){
		margin:0;
	}
		.imgDiv{
			background:#fff;
		}

	</style>
</head>
<body>
	<div class="container_container">
		<div class="main_top">
			<div class="mainImg">
				<div class="fengImg flipbook-viewport">
						<div class="container">
							<div class="flipbook">
								<div class="imgDiv"><img src="http://www.youyiku-yishu.cn/{$cover}" class="img"></div>
								<volist name="page" id="vo">
									<div class="imgDiv">
										<div class="three">
											<div class="trim left trim_left"></div>
											<div class="trim left trim_right"></div>
											<div class="trim left conversion_bot"></div>
										</div>
									</div>
								</volist>
							</div>
						</div>
				</div>
				<div class="fengText"><output class="output">1</output>/<span class="zongshu"></span></div>
				<div class="gundong">
					<input class="dundong_input" type="range" min="1" max="10" data-rangeslider="" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;" value="1">
					<!-- <div class="gun_bot rangeslider__fill"></div>
					<div class="gun_top rangeslider__handle"></div> -->
				</div>
			</div>
			<div class="scImg">
				<div class="addImg" onclick="editPhotoBook()">
					<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_home_upload_photos_btn_nor.png" class="img">
				</div>
				<div class="chicun">
				图片尺寸需大于<span class="color">1280*720像素</span><br>
				否则可能没法保证印刷质量哦～
				</div>
			</div>
		</div>
		<div class="main_bot">
			<div class="photo_main">
				<div class="photoName">相册动态</div>
				<div class="photoText">
					<div class="state">
						<div class="state_left left"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/小小梦想.jpg" class="img radius"></div>
						<div class="state_right left">
							<div class="stateName">
								<span class="userName">小婊砸</span>
								<span class="true">加入照片制作成员</span>
							</div>
							<div class="stateText">欢迎来到优忆库照片书制作属于自己的相册只需上传照片，选择想要的相册样式，我们忆书会帮你完成其余的工作的；最惊喜的是相册书还可以添加成员(点击我的)一起给相册传照片，让这本相册更有意义快快上传图片吧
							</div>

							<div class="stateTime">一个月前</div>
						</div>
					</div>
					<volist name="logList" id="vv">
						<div class="state">
							<div class="state_left left"><img src="{$vv.userPhoto}" class="img radius"></div>
							<div class="state_right left">
								<div class="stateName">
									<span class="userName">{$vv.userName}</span>
									<if condition="$vv['type'] eq 1">
										<span class="true">上传了1张照片</span>
										<elseif condition="$vv['type'] eq 3"/>
										<span class="true">加入了制作</span>
									</if>
								</div>

							<div class="stateText none"></div>
							<div class="stateImg">
								<if condition="$vv['type'] eq 1">
								<div class="state_img left">
									<img src="http://www.youyiku-yishu.cn/{$vv.content}" class="img" />
								</div>
								</if>
							</div>
							<div class="stateTime">{$vv.friendlyTime}</div>
							</div>
						</div>
					</volist>

				</div>
			</div>
		</div>
		<input type="hidden" id="pbId" value="{$bookId.photoBookId}">
		<div class="footer">
			<ul class="footer_ul">
				<li class="footer_li left">

					<div class="footer_img" onclick="editPhotoBook()"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_nav_edit_icon_sel.png"></div>
					<span class="footer_text footer_color">点击编辑</span>

				</li>
				<li class="footer_li left">
					<div class="footer_img" onclick="myBooks()"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_nav_me_icon_nor.png"></div>
					<span class="footer_text">我的</span>
				</li>
				<li class="footer_li left">
					<div class="footer_img" onclick="order()"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 14.png"></div>
					<span class="footer_text">购买</span>
				</li>
			</ul>
		</div>
	</div>


	<div style="width: 100%;height: 1000px;display: none">

		<header data-am-widget="header" class="am-header am-header-default am-header-fixed wst-inner-page-nav" id="clip" style="display:block;">
			<div class="am-header-left am-header-nav" onclick="closeUploadArea();">关闭</div>
			<div class="am-header-right am-header-nav" id="clipBtn">上传</div>
		</header>

		<div class="am-form-group am-form-file">
			<!--<button type="button" class="am-btn am-btn-danger am-btn-sm addImg" id="addImg"><i class="am-icon-cloud-upload"></i></button>-->
			<input type="file" id="uploadImg" class="uploadfile-input" accept="image/*">
			<div id="complainsImg" class="complains-img-area"></div>
			<div style="clear:both;"></div>
		</div>

		<div class="upload-modal" id="upload_modal">
			<div id="clipArea" class="clipArea"></div>
			<input type="hidden" id="imgData" autocomplete="off">
		</div>

		<div class="am-modal am-modal-loading am-modal-no-btn none" tabindex="-1" id="wst-default-loading">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">Loading...</div>
				<div class="am-modal-bd">
					<span class="am-icon-spinner am-icon-spin"></span>
				</div>
			</div>
		</div>

	</div>

	<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/Photoclip/iscroll-zoom.js"></script>
	<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/Photoclip/hammer.js"></script>
	<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/Photoclip/jquery.photoClip.js"></script>
<script type="text/javascript">
	$("#clipArea").photoClip({
		width: 350,
		height: 350,
		file: "#uploadImg",
		view: "#view",
		ok: "#clipBtn",
		loadStart: function() {
			$("#wst-default-loading").modal();
		},
		loadComplete: function() {
			$('#clipArea .photo-clip-mask').remove();//不需要截图，因此移除
			$("#wst-default-loading").modal('close');
		},
		clipFinish: function(dataURL) {
			var imgData = $('#clipArea .photo-clip-view').find('img').attr('src');
			if(!imgData || imgData==''){
				wstMsg('请先选择图片');
				return false;
			}
			$("#wst-default-loading").modal();
			$.post(Think.U('WebApp/PhotoBooks/addPhoto'), {'imgData': imgData}, function(data){
//
					alert(JSON.stringify(data))
				$("#wst-default-loading").modal('close');
				closeUploadArea();
			});
		}
	});

	//关闭图片上传区
	function closeUploadArea(){
//		$('.not-upload').show();
		$('.hy').hide();
		$('#clip').hide();
		//清空图片上传区的内容
		$('#clipArea').find('img').remove();
		$('#file').val('');
		$('#view').css('background-image','');
		$('#imgData').val('');
		$('.shangText').show();
	}
$(function progressbar(){
	var w = $(".graph").width();
	setTimeout(function(){$('#bar').animate({width:w});},500);
	setTimeout(function(){$(".flipbook-viewport").show();},1000);
});
//屏蔽ios下上下弹性
// $(window).on('scroll.elasticity', function (e) {
//   e.preventDefault();
// }).on('touchmove.elasticity', function (e) {
//   e.preventDefault();
// });

function loadApp() {
  var w=$('.fengImg').width();
  var h=$('.fengImg').height();
  $('.flipboox').width(w).height(h);
  $('.fengImg').resize(function(){
	  w=$('.fengImg').width();
	  h=$('.fengImg').height();
	  $('.flipboox').width(w).height(h);
  });

  $('.flipbook').turn({
		  // Width
		  width:w,
		  // Height
		  height:h,
		  // Elevation
		  elevation: 50,
		  display :'single',
		  // Enable gradients
		  gradients: true,
		  // Auto center this flipbook
		  autoCenter: true
  });

}
var WST = ThinkPHP = window.Think = {
	"ROOT"   : "__ROOT__",
}
// Load the HTML4 version if there's not CSS transform
yepnope({
  test : Modernizr.csstransforms,
  yep: [ WST.ROOT +'/Apps/WebApp/View/default/js/turn.js'],
  nope: [ WST.ROOT +'/Apps/WebApp/View/default/js/turn.html4.min.js'],
  complete: loadApp
});

</script>
	<include file="./Apps/WebApp/View/default/common_js.html" />
<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/rangeslider.min.js"></script>
<script>
    $(function(){
//生成照片
		var pbId=$('#pbId').val();
//		alert(pbId)
		$.post(Think.U('WebApp/PhotoBooks/firstCreatePhoto'),{pbId:pbId}, function(data){
//		alert(JSON.stringify(data))
//		<div class="imgDiv">
//					<div class="three">
//					<div class="trim left trim_left"></div>
//					<div class="trim left trim_right"></div>
//					<div class="trim left conversion_bot"></div>
//					</div>
//					</div>
			if(data.length>0){
				var str='';
				for(var i=0;i<data.length;i++){
					for(var k=0;k<data[i].length;k++){
						var photo=data[i][k];
						if(photo.inPage==i+1 && photo.direction==1){
							str+='<img src="'+WST.ROOT+'/'+photo.img+'" class="img">';
							$('.imgDiv').eq(i+1).children('.three').children('.trim_left').append(str);
							str='';
						}
						else if(photo.inPage==i+1 && photo.direction==2){
							str+='<img src="'+WST.ROOT+'/'+photo.img+'" class="img">';
							$('.imgDiv').eq(i+1).children('.three').children('.trim_right').append(str);
							str='';
						}
						else if(photo.inPage==i+1 && photo.direction==3){
							str+='<img src="'+WST.ROOT+'/'+photo.img+'" class="img">';
							$('.imgDiv').eq(i+1).children('.three').children('.conversion_bot').append(str);
							str='';
						}
					}
				}
			}

		})
        var $document   = $(document);
        var selector    = '[data-rangeslider]';
        var $inputRange = $(selector);

        // Example functionality to demonstrate a value feedback
        // and change the output's value.
        function valueOutput(element) {
            var value = element.value;
            var output = $('.output').text(value);
            // alert(output)
            // output.innerHTML = value;

        }

        // Initial value output
        for (var i = $inputRange.length - 1; i >= 0; i--) {
            valueOutput($inputRange[i]);
        };

        // Update value output
        $document.on('input', selector, function(e) {
            valueOutput(e.target);
        });

        // Initialize the elements
        $inputRange.rangeslider({
            polyfill: false
        });

        // Example functionality to demonstrate programmatic value changes
        $document.on('click', '#js-example-change-value button', function(e) {
            var $inputRange = $('input[type="range"]', e.target.parentNode);
            var value = $('input[type="number"]', e.target.parentNode)[0].value;

            $inputRange
                .val(value)
                .change();
        });

        // Example functionality to demonstrate programmatic attribute changes
        $document.on('click', '#js-example-change-attributes button', function(e) {
            var $inputRange = $('input[type="range"]', e.target.parentNode);
            var attributes = {
                min: $('input[name="min"]', e.target.parentNode)[0].value,
                max: $('input[name="max"]', e.target.parentNode)[0].value,
                step: $('input[name="step"]', e.target.parentNode)[0].value
            };

            $inputRange
                .attr(attributes)
                .rangeslider('update', true);
        });

        // Example functionality to demonstrate destroy functionality
        $document
            .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {
                $('input[type="range"]', e.target.parentNode).rangeslider('destroy');
            })
            .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {
                $('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false });
            });
            var input= $('.dundong_input').val();
            //进度条的值改变
           $('.dundong_input').change(function(){
           		var input= $('.dundong_input').val();
           		$('.grouImg ').eq(input-1).removeClass('none').siblings().addClass('none');
           		var wrapper =$('.page-wrapper').eq(input-1).attr('page');
           		if(input==wrapper){
           			$('.page-wrapper').eq(input-1).siblings().css('zIndex','0');
           			$('.page-wrapper').eq(input-1).siblings().css('display','none');
           			$('.page-wrapper').eq(input-1).css('zIndex','9');
           			$('.page-wrapper').eq(input).css('zIndex','8');
           			$('.page-wrapper').eq(input-1).css('display','block');
           			$('.page-wrapper').eq(input).css('display','block');

           		}


           })
    });

    //进度条总数
	   var zong = $('.imgDiv ').length
        $('.zongshu').text(zong);
        $('.dundong_input').attr('max',zong);

	function editPhotoBook(){
		var pbId=$('#pbId').val()
		location.href= WST.U('WebApp/PhotoBooks/edit', 'pbId='+pbId);
	}
	function myBooks(){
//		alert(1)
		location.href= WST.U('WebApp/PhotoBooks/myBooks');
	}
	function order(){
		location.href = WST.U("WebApp/Orders/index");
	}

</script>
</body>
</html>